<template>
  <div>
    <template>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="今日统计" name="first">
            <div id="echarts2">
              
            </div>

        </el-tab-pane>
        <el-tab-pane label="本周统计" name="second">
          <div id="echarts3">
            
            </div>
        </el-tab-pane>
        <el-tab-pane label="本月统计" name="third">
          <div id="echarts4">
              
            </div>
        </el-tab-pane>
        <el-tab-pane label="年度统计" name="fourth">
            <div id="echarts5">

            </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
import echarts from 'echarts'
import AnalysisTwo from '../common/AnalysisTwo'
import week from '../common/week'
import month from '../common/month'
import years from '../common/years'


export default {
  mounted (){
     this.drawEcharts()
   },

  data() {
    return {
      activeName: "first",
      

    };
    
    
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

    drawEcharts () {
      //今日统计
      let chart2 = echarts.init(document.getElementById('echarts2'))

      chart2.setOption(AnalysisTwo);
      
      let chart3 = echarts.init(document.getElementById('echarts3'))

      chart3.setOption(week)

      let chart4 = echarts.init(document.getElementById('echarts4'))

      chart4.setOption(month)

      let chart5 = echarts.init(document.getElementById('echarts5'))

      chart5.setOption(years)

    }
  },

};
</script>

<style scoped>

.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #6bbb40;
  }

  #echarts2{
    width: 100%;
    height: 800px;
   
  }

  #echarts3{
    width: 1500px;
    height: 800px;
  }

  #echarts4{
    width: 1500px;
    height: 800px;
  }
  
  #echarts5{
    width: 1500px;
    height: 800px;
  }
  
</style>